<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS-Hover-Grid</title>
	<link type="text/css" href="hovergrid.css" rel="stylesheet">
</head>
<body>
<div class="folder">
	<p>Trying of mine</p>

	<div class="first">
		<p> Border : 实现边框效果（margin平移）</p>

		<div class="grid-border">
			<div class="grid-row">
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
			</div>
			<div class="grid-row">
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
			</div>
			<div class="grid-row">
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
			</div>
			<div class="grid-row">
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
			</div>
		</div>
	</div>

	<div class="second">
		<p>Padding ：实现边框效果（margin平移）</p>

		<div class="grid-padding">
			<div class="grid-row">
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
			</div>
			<div class="grid-row">
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
			</div>
			<div class="grid-row">
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
			</div>
			<div class="grid-row">
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
				<div class="grid-column"><span>1</span></div>
			</div>
		</div>
	</div>
</div>
<div class="folder">
	<p>Others method</p>

	<div class="wrap">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
		<div class="item">6</div>
		<div class="item">7</div>
		<div class="item">8</div>
		<div class="item">9</div>
	</div>
</div>

</body>
</html>